<template>
  <div class="map-show" @click="initState">
    <!-- 侧边栏 -->
    <aside class="side-bar">
      <ul class="bar">
        <li v-for="(item,index) in selectBarData" :key="'bar'+index" @click="selectBar(index)" :class="activeBar == index?'active':''">
          <p><span :class="item.icon"></span></p>{{item.text}}
        </li>
      </ul>
      <div class="contents">
        <div class="content" :class="activeBar === 0?'activity':''">
          <div class="padd">
            <!-- 搜索框 -->
            <el-input size="small" placeholder="请输入内容" v-model="keywords" style="margin-bottom:20px" @keyup.enter.native="handleSearch">
              <i style="cursor: pointer" class="el-icon-search el-input__icon" slot="suffix" @click="handleSearch">
              </i>
            </el-input>
            <!-- 搜索结果列表 -->
            <ul class="search-condition" v-show="keywordVisible">

              <li v-for="(item, index) in searchParams.keywords" :key="index">
                <span>{{item}}</span>
                <i class="el-icon-error" @click="handleDeleteSearch(index)"></i>
              </li>
            </ul>
            <!-- 对象类型 -->
            <el-select v-model="searchParams.objectType" placeholder="请选择" style="padding-bottom:20px;width:100%" size="mini" @change="handleObjectType">
              <el-option value="socialaccount" label="实体">实体</el-option>
              <el-option value="socialdynamic" label="事件">事件</el-option>
              <el-option value="keyfigures" label="重点人物">重点人物</el-option>
              <el-option value="focusgroup" label="重点组织">重点组织</el-option>
              <el-option value="document" label="文档">文档</el-option>
              <el-option value="media" label="多媒体">多媒体</el-option>
            </el-select>
            <!-- 属性类型 -->
            <el-select v-model="objectTypeCount" @change="handleObjectTypeCount" placeholder="请选择" style="width:100%" size="mini">
              <el-option v-for="item in sxTypeList" :key="item.uri" :value="item.uri" :label="item.displayname">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="content" :class="activeBar === 1?'activity':''">
          <div class="padd">
            <div class="navbar-search">
              <ul class="workspaces-list">
                <li draggable class="w-mine wid-id1" v-for="(item,index) in loadTreeList" :key="item.id" :class="[{active:index == activeNum}]" @click="handleChooseGroupId(index,item.id,item.displayname)">
                  <a><i class="fa fa-file-o" style="padding-right: 10px;"></i>{{item.displayname}}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 搜索结果列表 -->
      <div class="searchList">
        <transition name="slide-fade">
          <template>
            <div class="searchList_content" v-if="activeBar === 0 && entryList.length>0 && !searchLoading" id="result">
              <ul class="search-result">
                <li draggable="true" v-for="(item,index) in entryList" :key="index" @dragstart="dragstart($event, item)" @dragend="dragend($event,index,item)" @click="handleChooseSearchClick($event,index,item)" :class="[{active:item.active}]">
                  <!--
                      @click.shift="handleChooseSearch($event,index)"
                      @click.ctrl="handleChooseSearchCtrl($event,index)"
                     -->
                  <div>
                    <span class="search-result-img preview" :style="{backgroundImage: `url(${item.iconUrl})`}">
                    </span>
                    <span class="search-result-container">
                      <span class="search-info">
                        {{item.showName ? item.showName : (item.displayName)}}
                      </span>
                      <p class="search-info-info">
                        {{item.name}}
                      </p>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="searchList_content loading" v-else-if="searchLoading">
              <span class="fa fa-circle-o-notch fa-spin"></span>加载中
            </div>
          </template>
        </transition>
        <transition name="slide-fade">
          <template>
            <div class="searchList_content" v-if="activeBar === 1 && groupList.length>0 && !FZLoading" id="FZresult">
              <ul class="search-result">
                <li draggable="true" v-for="(item,index) in groupList" :class="[{groupActive:item.active}]" @dragstart="dragstart($event, item)" @dragend="dragend($event,index,item)" :key="index" @click="handleChooseSearchClick($event,index,item)">
                  <div>
                    <span class="search-result-img preview" :style="{backgroundImage: `url(${item.iconUrl})`}">
                    </span>
                    <span class="search-result-container">
                      <span class="search-info">
                        {{item.showName ? item.showName : (item.displayName)}}
                      </span>
                      <p class="search-info-info">
                        {{item.name}}
                      </p>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="searchList_content loading" v-else-if="FZLoading">
              <span class="fa fa-circle-o-notch fa-spin"></span>加载中
            </div>
          </template>
        </transition>
      </div>
      <div class="timelineBar">
        <div class="contentLine">
          <time-line :getSnapshotList="getSnapshotList" :groupDisplayName="groupDisplayName" v-bind:historyName.sync="historyName" ref="timeLine">
          </time-line>
        </div>
      </div>
    </aside>
    <!-- main -->
    <div class="main">
      <!-- 工具栏 -->
      <div class="tootip">
        <tooTip :map="map" :markerList="allMark" ref="tooTip"></tooTip>
      </div>
      <div class="map" id="allmap" @click="clearInit()"></div>
    </div>
    <!-- 详细信息 -->
    <div class="detail-pane right_info animated" :class="infoVisiable" v-if="infoVisiable">
      <div class="content">
        <div class="type-content org-visallo-layout-root" style="flex-direction: column;display: flex;">
          <div class="detail-pane-head">
            <div class="detail-text-left">
              <p>{{nodesParmas.showName ? nodesParmas.showName : nodesParmas.displayname}}</p>
              <p>{{nodesParmas.name}}</p>
            </div>
            <div class="detail-pane-right" :style="{backgroundImage: `url(${nodesParmas.image})`}"></div>
          </div>

          <!--属性添加按钮-->
          <div class="org-visallo-toolbar">
            <ul>
              <li class="has-submenu no-event">
                <a href="javascript:;">
                  <strong>查看</strong>
                </a>
                <ul>
                  <li class=" hide-in-fullscreen-details" @click="viewObjectInfo(nodesParmas.objecttype,nodesParmas.rowkey,nodesParmas.objecturi,nodesParmas.name,nodesParmas.displayname,nodesParmas.image,nodesParmas.showName,'false',nodesParmas.belongGroup)">

                    <a href="javascript:;">
                      查看
                      <div class="subtitle">
                        在新窗口/标签中打开
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu no-event">
                <a href="javascript:;">
                  <strong>属性</strong>
                </a>
                <ul>
                  <li class=" hide-in-fullscreen-details" @click="getproperty(nodesParmas.objecturi)">
                    <a href="javascript:;">
                      属性
                      <div class="subtitle">
                        向实体添加属性
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu  pull-right no-event">
                <a href="javascript:;" class="icon">
                  <strong style="">&nbsp;</strong>
                </a>
                <ul>
                  <li class=" requires-EDIT" data-event="deleteItem" @click="handleDeleteNode">
                    <a>
                      移除实体
                      <div class="subtitle">从画布中移除</div>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>

          <!--属性信息选择添加-->
          <div class="overflow-layout" style="flex: 1 1 auto; overflow: auto; position: relative;">
            <div class="property-input">
              <div class="form" v-if="showSelect">
                <el-form ref="addAttribute" :model="addAttribute">
                  <el-form-item>
                    <el-select value-key="displayname" style="width: 100%;" size="small" v-model="addAttribute" @change="handleChoosePropertyUri" placeholder="请选择属性">
                      <el-option v-for="(itemObj,index) in findOperateListModelAll" :label="itemObj.displayname" :value="itemObj" :key="index"></el-option>
                      <el-button type="primary" class="addProperty" @click="addProperty">
                        添加属性
                      </el-button>
                    </el-select>
                  </el-form-item>

                  <el-form-item v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入经度" v-model="addAttributeSave.longitude"></el-input>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入纬度" v-model="addAttributeSave.latitude"></el-input>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入描述" v-model="addAttributeSave.address"></el-input>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'TimeInterval'">
                    <el-date-picker style="width: 100%" v-model="addAttributeSave.timeStart" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'TimeInterval'">
                    <el-date-picker style="width: 100%" v-model="addAttributeSave.timeEnd" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'DateTime'">
                    <el-date-picker v-model="addAttributeSave.value" type="datetime" style="width: 100%;" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'String'">
                    <el-input :placeholder="`请输入${addAttribute.name}`" v-model="addAttributeSave.value"></el-input>
                  </el-form-item>
                  <el-form-item style="text-align: right">
                    <el-button size="small" @click="handleCannel">取消</el-button>
                    <el-button size="small" type="primary" @click="handleCreateAttr()">立即创建</el-button>
                  </el-form-item>
                </el-form>
              </div>

              <div class="table-attribute">
                <table>
                  <tr v-for="(item,index) in propertyList">
                    <td class="property-name" colspan="2">{{item.propertyName}}</td>
                    <td class="property-value" colspan="5">
                      <div class="box_outer" v-if="item.propertyType == 'TimeInterval'">
                        <p v-for="(itemValue,index1) in item.propertyValues">
                          <template v-if="!itemValue.readOnly">
                            <span class="TimeIntervalSpan">
                              <el-date-picker v-model="itemValue.value.timeStart" type="datetime" size="mini" :disabled="protypeIndex!=(index+'-'+index1)">
                              </el-date-picker>
                              <p>-</p>
                              <el-date-picker v-model="itemValue.value.timeEnd" type="datetime" size="mini" :disabled="protypeIndex!=(index+'-'+index1)">
                              </el-date-picker>
                            </span>
                          </template>
                          <template v-else>
                            <span>{{itemValue.value.timeStart}} - {{itemValue.value.timeEnd}}
                            </span>
                          </template>
                          <template v-if="!itemValue.readOnly">
                            <template v-if="isShowSave && protypeIndex==(index+'-'+index1)">
                              <el-button type="primary" size="mini" @click="editProtype(item,itemValue)">保存</el-button>
                              <el-button type="info" size="mini" @click="backEdit">取消</el-button>
                            </template>
                            <template v-else>
                              <i @click="delProtype(index,item,itemValue)" title="删除" class="el-icon-remove pointer"></i>
                              <i @click="openSave(index,index1,itemValue)" title="编辑" class="el-icon-edit-outline pointer"></i>
                            </template>
                          </template>
                        </p>
                      </div>
                      <div class="box_outer" v-else-if="item.propertyType == 'GisData'">
                        <p v-for="(itemValue,index1) in item.propertyValues">
                          <span class="GisData" v-if="!itemValue.readOnly">
                            <el-input v-model="itemValue.value.address" size="mini" :disabled="protypeIndex!=(index+'-'+index1)"></el-input>
                            <div class="latLon">
                              <el-input v-model="itemValue.value.longitude" size="mini" :disabled="protypeIndex!=(index+'-'+index1)"></el-input>
                              <el-input v-model="itemValue.value.latitude" size="mini" :disabled="protypeIndex!=(index+'-'+index1)"></el-input>
                            </div>
                          </span>
                          <span class="GisData" v-else>{{itemValue.value.address}} {{itemValue.value.longitude}}{{itemValue.value.latitude}}</span>
                          <template v-if="!itemValue.readOnly">
                            <template v-if="isShowSave && protypeIndex==(index+'-'+index1)">
                              <el-button type="primary" size="mini" @click="editProtype(item,itemValue)">保存</el-button>
                              <el-button type="info" size="mini" @click="backEdit">取消</el-button>
                            </template>
                            <template v-else>
                              <i @click="delProtype(index,item,itemValue)" title="删除" class="el-icon-remove pointer"></i>
                              <i @click="openSave(index,index1,itemValue)" title="编辑" class="el-icon-edit-outline pointer"></i>
                            </template>
                          </template>
                        </p>
                      </div>
                      <div class="box_outer" v-else-if="item.propertyType == 'DateTime'">
                        <p v-for="(itemValue,index1) in item.propertyValues">
                          <span v-if="!itemValue.readOnly">
                            <el-date-picker v-model="itemValue.value" type="datetime" size="mini" :disabled="protypeIndex!=(index+'-'+index1)">
                            </el-date-picker>
                          </span>
                          <span v-else>
                            {{itemValue.value}}
                          </span>
                          <template v-if="!itemValue.readOnly">
                            <template v-if="isShowSave && protypeIndex==(index+'-'+index1)">
                              <el-button type="primary" size="mini" @click="editProtype(item,itemValue)">保存</el-button>
                              <el-button type="info" size="mini" @click="backEdit">取消</el-button>
                            </template>
                            <template v-else>
                              <i @click="delProtype(index,item,itemValue)" title="删除" class="el-icon-remove pointer"></i>
                              <i @click="openSave(index,index1,itemValue)" title="编辑" class="el-icon-edit-outline pointer"></i>
                            </template>

                          </template>
                        </p>
                      </div>
                      <div class="box_outer" v-else>
                        <p v-for="(itemValue,index1) in item.propertyValues">
                          <span v-if="!itemValue.readOnly">
                            <el-input v-model="itemValue.value" size="mini" :disabled="protypeIndex!=(index+'-'+index1)"></el-input>
                          </span>
                          <span v-else>{{itemValue.value}}</span>
                          <template v-if="!itemValue.readOnly">
                            <template v-if="isShowSave && protypeIndex==(index+'-'+index1)">
                              <el-button type="primary" size="mini" @click="editProtype(item,itemValue)">保存</el-button>
                              <el-button type="info" size="mini" @click="backEdit">取消</el-button>
                            </template>
                            <template v-else>
                              <i @click="delProtype(index,item,itemValue)" title="删除" class="el-icon-remove pointer"></i>
                              <i @click="openSave(index,index1,itemValue)" title="编辑" class="el-icon-edit-outline pointer"></i>
                            </template>
                          </template>
                        </p>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>

              <div style="padding-left: 15px;padding-right:5px;background-color: #FFF">
                <el-collapse>
                  <el-collapse-item title="相关实体" name="socialdynamic" v-if="socialaccount.length != 0">
                    <div v-for="item in socialaccount" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.description}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="相关事件" name="dynamicCondition" v-if="dynamicCondition.length != 0">
                    <div v-for="item in dynamicCondition" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>

                  <!-- <el-collapse-item title="相关人物" name="keyfigures" v-if="keyfigures.length != 0">
                    <div v-for="item in keyfigures" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>

                  <el-collapse-item title="相关组织" name="focusgroup" v-if="focusgroup.length != 0">
                    <div v-for="item in focusgroup" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item> -->
                  <!-- 文档 -->
                  <el-collapse-item title="相关文档" name="document" v-if="document.length != 0">
                    <div v-for="item in document" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                  <!-- 多媒体 -->
                  <el-collapse-item title="相关多媒体" name="media" v-if="media.length != 0">
                    <div v-for="item in media" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="menu" :class="!menuShow?'nodata':''">
      <li @click="selectDraw('marker')">创建点</li>
      <li @click="selectDraw('polyline')">折线选择</li>
      <li @click="selectDraw('rectangle')">矩形选择</li>
      <li @click="selectDraw('circle')">圆形选择</li>
      <li @click="selectDraw('polygon')">多边形选择</li>
      <li @click="selectClear('polygon')">清除地图</li>
      <li @click="selectSave('polygon')">保存快照</li>
    </div>
    <!--新增属性对话框-->
    <el-dialog :visible.sync="propertyAddVisible" title="新增属性" :append-to-body='true' style="width:80%">
      <property-editor @closeDialog="closeAddPropertyDialog" :objectUri="nodesParmas.objecturi">
      </property-editor>
    </el-dialog>
  </div>
</template>
<script>
import 'animate.css'
import {
    getAssociationAttr,
    getRelationInfo,
    getGisList,
    getMapSnapshot,
    getGisPrototype
} from '@/api/map'
import { getsubscribeTree, getInstance } from '@/api/workBench'
import { deleteProperty } from '@/api/archives'
import tooTip from './tootip.vue'
import mapUtil from '@/utils/mapUtil'
import timeLine from './timeline.vue'
import gmapUtil from '@/utils/gmapUtil'
import eventPointImg from '@/images/event-point.png'
import eventPointCheckImg from '@/images/event-point-checked.png'
import {
    propertySave, // 新增属性
    propertyUpdate, // 编辑属性,
    filterListRelation, // 右击关联数据
    findOperateProperties, // 根据对象Uri获得该该对象下所有可操作的属性
    getdetail, // 实例详细信息
    gettree,
    listFullText // 获取列表数组
} from '@/api/relationFraph'
// 属性添加组件
const PropertyEditor = () =>
  import('@/views/archives/analysis/components/propertyEditor.vue')
export default {
    data () {
        return {
            // 属性选择框添加框
            propertyAddVisible: false,
            //  左侧bar数据
            selectBarData: [
                { icon: 'fa fa-search', text: '搜索' },
                { icon: 'fa fa-list', text: '分组' }
            ],
            // 对象类型List
            dxTypeList: ['实体', '事件', '重点人物', '重点组织'],
            // 属性类型List
            sxTypeList: [],
            // 实体属性类型
            objectTypeCount: '',
            keywords: '',
            // 搜索条件
            searchParams: {
                curpage: 1,
                keywords: [],
                objectList: [],
                objectType: 'socialaccount',
                persize: 20,
                tags: []
            },
            // 搜索结果列表是否显示
            keywordVisible: false,
            // 查询结果
            entryList: [],
            //  当前bar选择项
            activeBar: -1,
            // 详细信息是否显示
            infoVisiable: '',
            nodesParmas: {
                showName: '',
                name: '',
                image: '',
                objecturi: '',
                rowkey: ''
            }, // 点击节点对象信息
            showSelect: false, // 显示表单
            addAttribute: {}, // 添加属性
            addAttributeSave: {}, // 添加属性保存
            findOperateList: [],
            findOperateListModel: [],
            findOperateListModelAll: [],
            propertyList: [], // 详情获取属性值
            focusgroup: [], // 组织
            keyfigures: [], // 人物
            socialaccount: [], // 账号
            dynamicCondition: [], // 动态
            document: [], // 文档
            media: [], // 多媒体
            map: '',
            // 详细信息
            detailesData: {},
            // 当前地图选择节点
            current_checked_marker: '',
            // 当前页面对象
            allMark: [],
            loadTreeList: [], // 获取分组Id
            activeNum: null,
            // 分组信息
            FZ: {
                FZpage_size: 20,
                FZpage: 1
            },
            // 分组查询数据
            groupList: [],
            // 选中分组名称
            groupDisplayName: '',
            // 搜索结果列表选中的结果
            chooseResultList: [],
            // 搜索加载
            searchLoading: false,
            // 分组加载
            FZLoading: false,
            // 地图快照数据
            getSnapshotList: [],
            // 快照名称
            historyName: '',
            // 当前拖动对象所有的位置属性
            currentPlace: [],
            // 是否显示保存
            isShowSave: false,
            protypeIndex: 0,
            menuShow: false,
            // 修改前的值
            currentEditBefore: {},
            // 修改后的值
            currentEditAfter: {},
            // 当前快照选中点的值
            current_obj: {}
        }
    },
    components: {
        tooTip,
        timeLine,
        PropertyEditor
    },
    watch: {
        entryList (val) {
            if (val.length > 0) {
                // 监听result 的scroll
                this.$nextTick(() => {
                    let el = document.getElementById('result')
                    if (el) {
                        el.addEventListener('scroll', this.handleScroll)
                    }
                })
            }
        },
        groupList (val) {
            if (val.length > 0) {
                // 监听result 的scroll
                this.$nextTick(() => {
                    let el = document.getElementById('FZresult')
                    if (el) {
                        el.addEventListener('scroll', this.handleScrollFZ)
                    }
                })
            }
        }
    },
    created () {
        this.mapReloadData = mapUtil.tool.getMarkersInMap()
        this.loadTree()
    },
    mounted () {
        this.$nextTick(() => {
            let _this = this
            // 初始化地图
            this.map = gmapUtil.initMap('allmap')
            this.map.mapTypes.set('local', gmapUtil.LocalMapType)
            this.map.setMapTypeId('local')
            // 叠加层
            // this.map.overlayMapTypes.insertAt(0, new gmapUtil.CoordMapType(new google.maps.Size(256, 256)))
            // 绑定右击事件
            google.maps.event.addListener(this.map, 'rightclick', function (e) {
                _this.menuShow = true
                _this.$nextTick(() => {
                    _this.getPositionVal(e.wa.offsetX, e.wa.offsetY)
                })
            })
            // 设置经纬度范围
            let strictBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(35.81781, 25.75195),
                new google.maps.LatLng(42.16340, 45.74707)
            )
            google.maps.event.addListener(this.map, 'dragend', function () {
                if (strictBounds.contains(_this.map.getCenter())) return
                var c = _this.map.getCenter(),
                    x = c.lng(),
                    y = c.lat(),
                    maxX = strictBounds.getNorthEast().lng(),
                    maxY = strictBounds.getNorthEast().lat(),
                    minX = strictBounds.getSouthWest().lng(),
                    minY = strictBounds.getSouthWest().lat()
                if (x < minX) x = minX
                if (x > maxX) x = maxX
                if (y < minY) y = minY
                if (y > maxY) y = maxY
                _this.map.setCenter(new google.maps.LatLng(y, x))
            })
        })
    },
    methods: {
        getPositionVal (offsetX, offsetY) {
            let DomWidth = allmap.offsetWidth
            let DomHeight = allmap.offsetHeight
            let toolWidth = menu.offsetWidth
            let toolHeight = menu.offsetHeight
            // 点击地图左上
            if (offsetX <= DomWidth / 2 && offsetY <= DomHeight / 2) {
                menu.style.left = offsetX + 10 + 'px'
                menu.style.top = offsetY + 10 + 'px'
            }
            // 点击地图左下
            if (offsetX <= DomWidth / 2 && offsetY > DomHeight / 2) {
                menu.style.left = offsetX + 10 + 'px'
                menu.style.top = offsetY - toolHeight + 'px'
            }
            // 点击地图右上
            if (offsetX > DomWidth / 2 && offsetY <= DomHeight / 2) {
                menu.style.left = offsetX - toolWidth - 10 + 'px'
                menu.style.top = offsetY + 10 + 'px'
            }
            // 点击地图右下
            if (offsetX > DomWidth / 2 && offsetY > DomHeight / 2) {
                menu.style.left = offsetX - toolWidth - 10 + 'px'
                menu.style.top = offsetY - toolHeight - 10 + 'px'
            }
        },
        // 右击菜单恢复默认
        initState () {
            this.menuShow = false
            this.$refs.tooTip.MarkmenuShow = false
        },
        // 右击方法
        selectDraw (value) {
            this.$refs.tooTip.draw(value)
            this.menuShow = false
        },
        selectSave () {
            this.$refs.tooTip.showPhoto()
            this.menuShow = false
        },
        selectClear () {
            this.$refs.tooTip.clearOverlays()
            this.menuShow = false

            // 更新当前时间轴信息
            this.$refs.timeLine.getAllDetail([])
        },
        // 获取分组
        async loadTree (type, treeId) {
            let result = await getsubscribeTree({ top: 'false' })
            this.loadTreeList = result.data
            if (sessionStorage.getItem('MapgroupId')) {
                this.activeBar = -1
                for (let i = 0; i < this.loadTreeList.length; i++) {
                    let item = this.loadTreeList[i]
                    if (item.id == sessionStorage.getItem('MapgroupId')) {
                        this.handleChooseGroupId(
                            i,
                            this.loadTreeList[i].id,
                            this.loadTreeList[i].displayname
                        )
                        this.activeNum = i
                    }
                }
            } else {
                this.handleChooseGroupId(
                    0,
                    this.loadTreeList[0].id,
                    this.loadTreeList[0].displayname
                )
            }
        },
        // 打开保存按钮
        openSave (index, index1, value) {
            console.log(sessionStorage.getItem('current_obj'))
            this.isShowSave = true
            this.protypeIndex = index + '-' + index1
            // 当前修改前的值
            this.currentEditBefore.longitude = value.value.longitude
            this.currentEditBefore.latitude = value.value.latitude
        },
        // 删除属性
        delProtype (index, item, itemvalue) {
            let propertyeObj = {
                rowkey: this.nodesParmas.rowkey,
                objectUri: this.nodesParmas.objecturi,
                propertyList: []
            }
            if (item.propertyType == 'TimeInterval') {
                propertyeObj.propertyList.push({
                    propertyUri: item.propertyUri,
                    timeEnd: new Date(itemvalue.timeEnd).getTime(),
                    timeStart: new Date(itemvalue.timeStart).getTime(),
                    propertyType: item.propertyType
                })
            } else if (item.propertyType == 'DateTime') {
                propertyeObj.propertyList.push({
                    propertyUri: item.propertyUri,
                    value: new Date(itemvalue.value).getTime(),
                    propertyType: item.propertyType
                })
            } else if (item.propertyType == 'GisData') {
                propertyeObj.propertyList.push({
                    propertyUri: item.propertyUri,
                    address: itemvalue.value.address,
                    longitude: itemvalue.value.address,
                    latitude: itemvalue.value.address,
                    propertyType: item.propertyType
                })
            } else {
                propertyeObj.propertyList.push({
                    propertyUri: item.propertyUri,
                    value: itemvalue.value,
                    propertyType: item.propertyType
                })
            }

            this.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deleteProperty(propertyeObj).then(async data => {
                        this.$message({ message: '删除成功!', type: 'success' })
                        this.propertyList.splice(index, 1)

                        console.log(this.allMark)
                        for (let [index, items] of this.allMark.entries()) {
                            if (items.rowkey === this.nodesParmas.rowkey) {
                                this.allMark[index].propertyList = this.propertyList
                                this.allMark[index].isEdit = true
                                // 当修改属性时间时 时间轴作出相应更新
                                if (
                                    item.propertyType == 'TimeInterval' ||
                  item.propertyType == 'DateTime'
                                ) {
                                    this.$refs.timeLine.getKZAllDetail(this.allMark)
                                } else if (item.propertyType == 'GisData') {
                                    // 重新打点 只换位置
                                    let allOverlay = this.map.getOverlays()
                                    // todo
                                    for (let list of allOverlay) {
                                        if (list.customData.rowkey == this.nodesParmas.rowkey) {
                                            // this.$refs.tooTip.CurrentDelmarker.marker = list
                                            console.log(this.currentEditBefore)
                                            this.$refs.tooTip.removeMarkerBySX(
                                                this.currentEditBefore,
                                                list
                                            )
                                            return
                                        }
                                    }
                                }
                            }
                        }
                    })
                })
                .catch(() => {
                    this.$message({ type: 'info', message: '已取消删除' })
                })
        },
        // 取消编辑
        backEdit (e) {
            this.isShowSave = false
            this.protypeIndex = 0
            console.log(sessionStorage.getItem('current_obj'))
            // 获取对象详情
            if (sessionStorage.getItem('current_obj')) {
                this.propertyList = JSON.parse(sessionStorage.getItem('current_obj'))
                sessionStorage.removeItem('current_obj')
            } else {
                this.getNodeDetails(
                    this.nodesParmas.rowkey,
                    this.nodesParmas.objecturi
                )
            }
        },
        // 编辑属性
        editProtype (item, itemvalue) {
            this.currentEditAfter = itemvalue.value
            let propertyeObj = {
                objectUri: this.nodesParmas.objecturi,
                rowkey: this.nodesParmas.rowkey,
                propertyList: []
            }
            if (item.propertyType == 'TimeInterval') {
                propertyeObj.propertyList.push({
                    propertyUri: item.propertyUri,
                    timeEnd: new Date(itemvalue.timeEnd).getTime(),
                    timeStart: new Date(itemvalue.timeStart).getTime(),
                    propertyType: item.propertyType
                })
            } else if (item.propertyType == 'DateTime') {
                propertyeObj.propertyList.push({
                    propertyUri: item.propertyUri,
                    value: new Date(itemvalue.value).getTime(),
                    propertyType: item.propertyType
                })
            } else if (item.propertyType == 'GisData') {
                propertyeObj.propertyList.push({
                    propertyUri: item.propertyUri,
                    address: itemvalue.value.address,
                    longitude: itemvalue.value.longitude,
                    latitude: itemvalue.value.latitude,
                    propertyType: item.propertyType
                })
            } else {
                propertyeObj.propertyList.push({
                    propertyUri: item.propertyUri,
                    value: itemvalue.value,
                    propertyType: item.propertyType
                })
            }
            setTimeout(() => {
                propertyUpdate(propertyeObj).then(async res => {
                    if (res.status == 200) {
                        this.$message.success('修改成功')
                        this.protypeIndex = 0
                        this.getNodeDetails(
                            this.nodesParmas.rowkey,
                            this.nodesParmas.objecturi
                        )
                        // 判断编辑属性的点是否在地图上 如果在当创建的时候需要在重新加载位置和时间
                        for (let [index, items] of this.allMark.entries()) {
                            if (items.rowkey === this.nodesParmas.rowkey) {
                                this.allMark[
                                    index
                                ].propertyList = await this.$refs.tooTip.getallDetails({
                                    rowkey: items.rowkey,
                                    objectUri: items.objectUri
                                })
                                this.allMark[index].isEdit = true
                                console.log(this.allMark[index])
                                // 当修改属性时 时间轴作出相应更新
                                this.$refs.timeLine.getKZAllDetail(this.allMark)
                                // 当修改属性是时间区间或者时间点的时候 时间轴作出相应更新
                                if (
                                    item.propertyType == 'TimeInterval' ||
                  item.propertyType == 'DateTime'
                                ) {
                                    // let newMarker = []
                                    // let allOverlay = this.map.getOverlays()
                                    // for(let list of allOverlay){
                                    //   newMarker.push(list.customData)
                                    // }
                                    console.log(this.allMark)
                                    // this.$refs.timeLine.getKZAllDetail(this.allMark)
                                } else if (item.propertyType == 'GisData') {
                                    // 重新打点 只换位置
                                    let allOverlay = this.map.getOverlays()
                                    // todo
                                    for (let list of allOverlay) {
                                        if (list.customData.rowkey == this.nodesParmas.rowkey) {
                                            // this.$refs.tooTip.CurrentDelmarker.marker = list
                                            console.log(this.currentEditBefore)
                                            this.$refs.tooTip.removeMarkerBySX(
                                                this.currentEditBefore,
                                                list
                                            )
                                            let Cdisplayname = this.nodesParmas.showName
                                                ? this.nodesParmas.showName
                                                : this.nodesParmas.displayName
                                            console.log(this.allMark)
                                            console.log(this.nodesParmas)
                                            console.log(this.propertyList)
                                            this.$refs.tooTip.addMarker(
                                                itemvalue.value.longitude,
                                                itemvalue.value.latitude,
                                                this.nodesParmas.rowkey,
                                                this.nodesParmas.objecturi,
                                                this.nodesParmas.objectType,
                                                Cdisplayname,
                                                this.nodesParmas.name,
                                                this.nodesParmas.image,
                                                this.nodesParmas.belongGroup,
                                                this.propertyList
                                            )
                                            this.$refs.timeLine.getKZAllDetail(this.allMark)
                                            return
                                        }
                                    }
                                }
                            }
                        }
                    }
                })
            }, 0)
        },
        // 分组查询
        handleGroupList () {
            this.FZLoading = true
            let params = {
                groupId: sessionStorage.getItem('MapgroupId'),
                keyword: '',
                curpage: this.FZ.FZpage,
                pagesize: this.FZ.FZpage_size
            }
            getInstance(params)
                .then(res => {
                    if (res.status == 200) {
                        this.groupList = res.data
                        this.groupList.forEach(v => {
                            if (v.personIconUrl) {
                                v.iconUrl = v.personIconUrl
                            }
                        })
                        this.FZLoading = false
                        for (let i = 0; i < this.groupList.length; i++) {
                            this.groupList[i].active = false
                        }
                    } else {
                        this.$message.error(res.msg)
                    }
                })
                .catch(error => {
                    this.$message.error(error)
                })
        },
        // 左侧菜单样式
        async handleChooseGroupId (_index, _id, _name) {
            // let vm = this;
            this.activeNum = _index
            sessionStorage.setItem('MapgroupId', _id)
            sessionStorage.setItem('mapgroupDisplayName', _name)
            this.groupDisplayName = sessionStorage.getItem('mapgroupDisplayName')
            this.FZ.FZpage = 1
            this.allMark = []
            await this.handleGroupList()
            // 获取快照
            this.handleGetSnapshot()
            // this.$refs.timeLine.KZactiveIndex = 0
        },
        // 获取快照
        async handleGetSnapshot (index) {
            let vm = this
            vm.getSnapshotList = []
            let snapshotObj = {
                caseId: sessionStorage.getItem('MapgroupId')
                    ? sessionStorage.getItem('MapgroupId')
                    : 1,
                id: ''
            }
            getMapSnapshot(snapshotObj)
                .then(res => {
                    if (res.status == 200) {
                        vm.getSnapshotList = res.data
                        this.$refs.tooTip.clearOverlays()
                        if (
                            vm.getSnapshotList &&
              vm.getSnapshotList.length > 0 &&
              vm.getSnapshotList[0].graphData
                        ) {
                            if (!index) {
                                this.$refs.timeLine.selectKZ(0)
                            }
                            let result = index
                                ? JSON.parse(vm.getSnapshotList[index].graphData)
                                : JSON.parse(vm.getSnapshotList[0].graphData)
                            console.log(result)
                            for (let self of result) {
                                let Cdisplayname = self.showName
                                    ? self.showName
                                    : self.displayName
                                this.$refs.tooTip.addMarker(
                                    self.longitude,
                                    self.latitude,
                                    self.rowkey,
                                    self.objectUri,
                                    self.objectType,
                                    Cdisplayname,
                                    self.name,
                                    self.iconUrl,
                                    self.belongGroup,
                                    self.propertyList
                                )
                            }
                        }
                        if (vm.getSnapshotList.length == 0) {
                            this.historyName = ''
                        } else {
                            if (index) {
                                this.historyName = this.getSnapshotList[index].description
                            } else {
                                this.historyName = this.getSnapshotList[0].description
                            }
                        }
                        setTimeout(() => {
                            this.$refs.timeLine.getSJZ()
                        }, 0)
                    } else {
                        this.$message.error(res.msg)
                    }
                })
                .catch(error => {
                    this.$message.error(error)
                })
        },
        // 跳转页面
        viewObjectInfo (
            objectType,
            instanceUri,
            objectUri,
            name,
            displayName,
            icon,
            showName,
            isImportant,
            _belongGroup
        ) {
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            let nameShow = showName || displayName
            currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
            window.open(currentUrl, '')
            // if (objectType == 'com.scistor.object.entity') {
            //     currentUrl = `${currentUrl}#/display?isImportant=${isImportant}&objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
            //     window.open(currentUrl, '')
            // } else {
            //     currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
            //     window.open(currentUrl, '')
            // }
        },
        // 恢复默认状态
        clearInit () {
            this.activeBar = -1
            if (!this.infoVisiable) {
                return
            }
            this.infoVisiable = 'fadeOutRight'
        },
        // 设置地图类型
        setMapType (type) {
            if (type === 'normal') {
                this.map.setMapType(BMAP_NORMAL_MAP)
            } else {
                this.map.setMapType(BMAP_SATELLITE_MAP)
            }
        },
        // 获取所拖动点的位置属性
        getPrototype (params) {
            this.currentPlace = []
            return new Promise((resolve, reject) => {
                getGisPrototype(params).then(
                    res => {
                        for (let item of res.data) {
                            for (let list of item.propertyValues) {
                                this.currentPlace.push({
                                    lng: list.value.longitude,
                                    lat: list.value.latitude
                                })
                            }
                        }
                        resolve(this.currentPlace)
                    },
                    error => {
                        reject(error)
                    }
                )
            })
        },
        // 开始移动
        dragstart (event, data) {
            // event.dataTransfer.setData('item', JSON.stringify(data))
            // this.getNodeDetails(data.rowkey, data.objectUri)
        },
        // 搜索接触拖拽到画布
        async dragend (event, index, obj) {
            console.log(this.chooseResultList)
            console.log(obj)
            if (this.chooseResultList && this.chooseResultList.length > 0) {
                this.chooseResultList.forEach(async (item, index) => {
                    let result = []
                    // 获取所拖对象的地址属性
                    let params = {
                        rowkey: item.rowkey,
                        objectUri: item.objectUri
                    }
                    result = await this.getPrototype(params)
                    let Cdisplayname = item.showName ? item.showName : item.displayName
                    if (result.length <= 0) {
                        this.$message.error('该对象无经纬度无法添加到地图')
                    } else {
                        for (let self of result) {
                            this.$refs.tooTip.addMarker(
                                self.lng,
                                self.lat,
                                item.rowkey,
                                item.objectUri,
                                item.objectType,
                                Cdisplayname,
                                item.name,
                                item.iconUrl,
                                item.belongGroup
                            )
                        }
                    }
                })
            } else {
                // 判断当前拖动的点是否已经存在在地图上 先删除已存在的点
                // let CallOverlay = this.map.getOverlays();
                // for (let item of CallOverlay) {
                //   if (item.customData) {
                //     if (item.customData.rowkey == obj.rowkey) {
                //       this.map.removeOverlay(item);
                //       if (this.allMark && this.allMark.length > 0) {
                //         for (let [index, self] of this.allMark.entries()) {
                //           if (self.rowkey == obj.rowkey) {
                //             this.allMark.splice(index, 1)
                //           }
                //         }
                //       }
                //     }
                //   }
                // }
                // 获取所拖对象的地址属性
                let params = {
                    rowkey: obj.rowkey,
                    objectUri: obj.objectUri
                }
                let Cdisplayname = obj.showName ? obj.showName : obj.displayName
                let result = await this.getPrototype(params)
                console.log(result)
                if (result.length <= 0) {
                    this.$message.error('该对象无经纬度无法添加到地图')
                } else {
                    for (let self of result) {
                        console.log('yige')
                        let propertyList = await this.$refs.tooTip.getallDetails({
                            rowkey: obj.rowkey,
                            objectUri: obj.objectUri
                        })
                        this.$refs.tooTip.addMarker(
                            self.lng,
                            self.lat,
                            obj.rowkey,
                            obj.objectUri,
                            obj.objectType,
                            Cdisplayname,
                            obj.name,
                            obj.iconUrl,
                            obj.belongGroup,
                            propertyList
                        )
                    }
                }
            }
            console.log('erge')
            // 放置完成清除所选对象
            this.chooseResultList = []
            // 更新对象
            // 获取所拖入对象属性
            let proResult = await this.$refs.tooTip.getallDetails({
                rowkey: obj.rowkey,
                objectUri: obj.objectUri
            })
            for (let [index, item] of this.allMark.entries()) {
                if (this.allMark[index].propertyList) {
                    this.allMark[index].propertyList = this.allMark[index].propertyList
                } else {
                    this.allMark[
                        index
                    ].propertyList = await this.$refs.tooTip.getallDetails({
                        rowkey: obj.rowkey,
                        objectUri: obj.objectUri
                    })
                }
            }
            this.$refs.timeLine.getSJZ()
        },
        // 搜索接触拖拽到画布
        allowDrop (event) {
            event.preventDefault()
        },

        // 画布结束拖拽数据
        drop (event) {
            // let vm = this;
            // let allData = vm.cy.json();
            // let data = event.dataTransfer.getData('item')
            // this.dropData = JSON.parse(data)
        },
        // 监听滚动事件
        handleScroll () {
            this.$nextTick(() => {
                const result = document.getElementById('result')
                const offsetHeight = result.offsetHeight
                const scrollTop = result.scrollTop
                const scrollHeight = result.scrollHeight
                if (offsetHeight + scrollTop - scrollHeight >= -1) {
                    // 需要执行的代码
                    this.searchParams.curpage = this.searchParams.curpage + 1
                    listFullText(this.searchParams).then(res => {
                        if (res.status == 200) {
                            let entryList = res.data
                            console.log('entryList')
                            this.entryList = this.entryList.concat(entryList)
                            for (let i = 0; i < this.entryList.length; i++) {
                                this.entryList[i].active = false
                            }
                        }
                    })
                }
            })
        },
        // 监听滚动事件
        handleScrollFZ () {
            console.log(1234)
            this.$nextTick(() => {
                let result = document.querySelector('#FZresult')
                if (result) {
                    console.log(result)
                    let offsetHeight = result.offsetHeight
                    const scrollTop = result.scrollTop
                    const scrollHeight = result.scrollHeight
                    if (offsetHeight + scrollTop - scrollHeight >= -1) {
                        // 需要执行的代码
                        this.FZ.FZpage = this.FZ.FZpage + 1
                        // this.FZLoading = true
                        let params = {
                            groupId: sessionStorage.getItem('MapgroupId'),
                            keyword: '',
                            curpage: this.FZ.FZpage,
                            pagesize: this.FZ.FZpage_size
                        }
                        getInstance(params)
                            .then(res => {
                                if (res.status == 200) {
                                    if (res.data.length > 0) {
                                        res.data.forEach(v => {
                                            if (v.personIconUrl) {
                                                v.iconUrl = v.personIconUrl
                                            }
                                        })
                                        this.groupList.push(res.data)
                                        for (let i = 0; i < this.groupList.length; i++) {
                                            this.groupList[i].active = false
                                        }
                                    }
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                            .catch(error => {
                                this.$message.error(error)
                            })
                    }
                }
            })
        },
        // 查询后点击效果
        handleChooseSearch (e, _index) {
            for (let i = 0; i < this.entryList.length; i++) {
                this.entryList[i].active = false
            }
            if (this.firstIndex) {
                this.secondIndex = _index
            } else {
                this.firstIndex = _index
                this.entryList[_index].active = true
            }
            this.chooseResultList = []
            if (
                (this.firstIndex && this.secondIndex) ||
        (this.firstIndex == 0 && this.secondIndex) ||
        (this.firstIndex == 0 && this.secondIndex == 0) ||
        (this.firstIndex && this.secondIndex == 0)
            ) {
                if (this.firstIndex > this.secondIndex) {
                    // chooseResultList
                    for (let n = 0; n < this.entryList.length; n++) {
                        if (n >= this.secondIndex && n <= this.firstIndex) {
                            this.chooseResultList.push(this.entryList[n])
                            this.entryList[n].active = true
                        }
                    }
                } else if (this.firstIndex < this.secondIndex) {
                    for (let m = 0; m < this.entryList.length; m++) {
                        if (m >= this.firstIndex && m <= this.secondIndex) {
                            this.chooseResultList.push(this.entryList[m])
                            this.entryList[m].active = true
                        }
                    }
                } else if (this.firstIndex == this.secondIndex) {
                    for (let l = 0; l < this.entryList.length; l++) {
                        if (l == this.firstIndex) {
                            this.chooseResultList.push(this.entryList[l])
                            this.entryList[l].active = true
                        }
                    }
                }
            }
            this.entryList = Object.assign([], this.entryList)
        },
        handleChooseSearchCtrl (e, _index) {
            if (this.chooseResultList.length != 0) {
                for (let i = 0; i < this.chooseResultList.length; i++) {
                    let item = this.chooseResultList[i]
                    if (item.rowkey == this.entryList[_index].rowkey) {
                        this.entryList[_index].active = !this.entryList[_index].active
                        this.chooseResultList.splice(i, 1)
                        this.entryList = Object.assign([], this.entryList)
                        return
                    }
                }
            }
            this.entryList[_index].active = true
            this.chooseResultList.push(this.entryList[_index])
            this.entryList = Object.assign([], this.entryList)
        },
        // 展示快照内对象
        showInfoKZ (e, _index, _obj) {
            console.log('showInfoKZ')
            sessionStorage.setItem('current_obj', JSON.stringify(_obj.propertyList))
            console.log(this.current_obj)
            for (let [index, self] of this.allMark.entries()) {
                if (self.rowkey == _obj.rowkey) {
                    if (self.isEdit) {
                        this.showInfo(e, _index, _obj)
                        return true
                    }
                }
            }
            console.log('1234')
            e.stopPropagation()
            let vm = this
            vm.protypeIndex = 0
            vm.showSelect = false
            // 显示详细信息
            this.infoVisiable = 'fadeInRight'
            this.nodesParmas.rowkey = _obj.rowkey
            this.nodesParmas.objecturi = _obj.objectUri
            this.nodesParmas.showName = _obj.showName
                ? _obj.showName
                : _obj.displayName
            this.nodesParmas.name = _obj.name
            this.nodesParmas.image = _obj.iconUrl
            this.nodesParmas.belongGroup = _obj.belongGroup
            this.nodesParmas.objectType = _obj.objectType
            this.propertyList = _obj.propertyList
            // 相关动态人物组织账号获取
            vm.handleDynamicCondition('socialdynamic')
            vm.handleFocusgroup('focusgroup')
            vm.handleKeyfigures('keyfigures')
            vm.handleAccountNumber('socialaccount')
            // 获取文档
            vm.handleDocument('document')
            // 获取多媒体
            vm.handleMedia('media')
        },
        // 展示对象
        showInfo (e, _index, _obj) {
            e.stopPropagation()
            let vm = this
            console.log('showInfo')
            vm.protypeIndex = 0
            vm.showSelect = false
            // 显示详细信息
            this.infoVisiable = 'fadeInRight'
            this.nodesParmas.rowkey = _obj.rowkey
            this.nodesParmas.objecturi = _obj.objectUri
            this.nodesParmas.showName = _obj.showName
                ? _obj.showName
                : _obj.displayName
            this.nodesParmas.name = _obj.name
            this.nodesParmas.image = _obj.iconUrl
            this.nodesParmas.belongGroup = _obj.belongGroup
            this.nodesParmas.objectType = _obj.objectType
            // 获取对象详情
            vm.getNodeDetails(_obj.rowkey, _obj.objectUri)
            // 相关动态人物组织账号获取
            vm.handleDynamicCondition('socialdynamic')
            vm.handleFocusgroup('focusgroup')
            vm.handleKeyfigures('keyfigures')
            vm.handleAccountNumber('socialaccount')
            // 获取文档
            vm.handleDocument('document')
            // 获取多媒体
            vm.handleMedia('media')
        },
        // 选择对象
        handleChooseSearchClick (e, _index, _obj) {
            e.stopPropagation()
            let vm = this
            vm.protypeIndex = 0
            vm.showSelect = false
            // 显示详细信息
            this.infoVisiable = 'fadeInRight'
            this.nodesParmas.rowkey = _obj.rowkey
            this.nodesParmas.objecturi = _obj.objectUri
            this.nodesParmas.showName = _obj.showName
                ? _obj.showName
                : _obj.displayName
            this.nodesParmas.name = _obj.name
            this.nodesParmas.image = _obj.iconUrl
            this.nodesParmas.belongGroup = _obj.belongGroup
            this.nodesParmas.objectType = _obj.objectType
            // 获取对象详情
            vm.getNodeDetails(_obj.rowkey, _obj.objectUri)
            // 相关动态人物组织账号获取
            vm.handleDynamicCondition('socialdynamic')
            vm.handleFocusgroup('focusgroup')
            vm.handleKeyfigures('keyfigures')
            vm.handleAccountNumber('socialaccount')
            // 获取文档
            vm.handleDocument('document')
            // 获取多媒体
            vm.handleMedia('media')
            // if (!e.shiftKey && !e.ctrlKey) {
            //     this.chooseResultList = []
            //     for (let i = 0; i < this.entryList.length; i++) {
            //         this.entryList[i].active = false
            //     }
            //     // this.entryList[_index].active = !this.entryList[_index].active;
            //     this.chooseResultList.push(this.entryList[_index])
            //     this.firstIndex = _index,
            //     this.entryList = Object.assign([], this.entryList)
            // }
        },
        // 获取详情
        getNodeDetails (_rowkey, _objectUri) {
            let vm = this
            let getdetailObj = {
                rowkey: _rowkey,
                objectUri: _objectUri
            }
            getdetail(getdetailObj).then(res => {
                if (res.status == 200) {
                    this.detailesData = res.data
                    let detailesData = res.data
                    this.propertyList = detailesData.propertyList
                }
            })
        },
        // 属性新增或编辑
        handleCreateAttr () {
            // propertySave propertyUpdate
            let vm = this
            let propertyeObj = {
                objectUri: this.nodesParmas.objecturi,
                rowkey: this.nodesParmas.rowkey,
                propertyList: []
            }
            this.addAttributeSave.propertyUri = this.addAttribute.propertyUri
            this.addAttributeSave.propertyType = this.addAttribute.propertyType
            if (this.addAttribute.propertyType == 'TimeInterval') {
                this.addAttributeSave.timeStart = new Date(
                    this.addAttributeSave.timeStart
                ).getTime()
                this.addAttributeSave.timeEnd = new Date(
                    this.addAttributeSave.timeEnd
                ).getTime()
            }
            if (this.addAttribute.propertyType == 'DateTime') {
                this.addAttributeSave.value = new Date(
                    this.addAttributeSave.value
                ).getTime()
            }
            propertyeObj.propertyList.push(this.addAttributeSave)
            // 属性保存
            propertySave(propertyeObj).then(async res => {
                if (res.status == 200) {
                    vm.getNodeDetails(
                        this.nodesParmas.rowkey,
                        this.nodesParmas.objecturi
                    )
                    for (let [index, items] of this.allMark.entries()) {
                        if (items.rowkey === this.nodesParmas.rowkey) {
                            // 跟新当前点的信息
                            this.allMark[
                                index
                            ].propertyList = await this.$refs.tooTip.getallDetails({
                                rowkey: items.rowkey,
                                objectUri: items.objectUri
                            })
                            this.allMark[index].isEdit = true
                            this.$refs.timeLine.getKZAllDetail(this.allMark)
                            // 当修改属性是时间区间或者时间点的时候 时间轴作出相应更新
                            if (
                                this.addAttributeSave.propertyType == 'TimeInterval' ||
                this.addAttributeSave.propertyType == 'DateTime'
                            ) {
                                // this.$refs.timeLine.getKZAllDetail(this.allMark)
                            } else if (this.addAttributeSave.propertyType == 'GisData') {
                                // 重新打点 只换位置
                                let allOverlay = this.map.getOverlays()
                                // todo
                                for (let list of allOverlay) {
                                    if (list.customData.rowkey == this.nodesParmas.rowkey) {
                                        // this.$refs.tooTip.CurrentDelmarker.marker = list
                                        console.log(this.currentEditBefore)
                                        this.$refs.tooTip.removeMarkerBySX(
                                            this.currentEditBefore,
                                            list
                                        )
                                        let Cdisplayname = this.nodesParmas.showName
                                            ? this.nodesParmas.showName
                                            : this.nodesParmas.displayName
                                        this.$refs.tooTip.addMarker(
                                            this.nodesParmas.longitude,
                                            this.nodesParmas.latitude,
                                            this.nodesParmas.rowkey,
                                            this.nodesParmas.objecturi,
                                            this.nodesParmas.objectType,
                                            Cdisplayname,
                                            this.nodesParmas.name,
                                            this.nodesParmas.image,
                                            this.nodesParmas.belongGroup
                                        )
                                        return
                                    }
                                }
                            }
                        }
                    }
                    vm.showSelect = false
                    vm.addAttributeSave = {}
                    vm.addAttribute.propertyType = ''
                    vm.addAttribute = {}
                }
            })
        },
        // 选择属性类型
        handleGroupCountFullText () {
            let obj = {
                uriList: '',
                typeList: [
                    'socialaccount',
                    'socialdynamic',
                    'keyfigures',
                    'focusgroup'
                ].join(',')
            }
            this.sxTypeList = []
            gettree(obj).then(res => {
                let treeData = res.data
                for (let i = 0; i < treeData.length; i++) {
                    if (this.searchParams.objectType == treeData[i].parentkey) {
                        this.sxTypeList.push(treeData[i])
                    }
                }
            })
        },
        // 对象类型选择
        handleObjectType () {
            this.objectTypeCount = ''
            this.searchParams.objectList = []
            this.handleInquireSearch()
            this.handleGroupCountFullText()
        },
        handleObjectTypeCount () {
            this.entryList = []
            this.searchParams.curpage = 1
            // this.firstIndex = ''
            // this.secondIndex = ''
            this.searchParams.objectList = []
            this.searchParams.objectList = [this.objectTypeCount]
            this.handleInquireSearch()
        },
        // 搜索
        handleSearch () {
            if (!this.keywords) {
                this.keywordVisible = false
                return
            } else {
                this.keywordVisible = true
            }
            let hasKeyword = ''
            hasKeyword = this.searchParams.keywords.find(item => {
                return item == this.keywords
            })
            if (!hasKeyword) {
                this.searchParams.keywords.push(this.keywords)
            }
            this.searchParams.objectList = []
            this.entryList = []
            this.searchParams.curpage = 1
            this.firstIndex = ''
            this.secondIndex = ''
            this.handleInquireSearch()
            this.handleGroupCountFullText()
        },
        // 全文检索
        handleInquireSearch () {
            this.searchLoading = true
            listFullText(this.searchParams).then(res => {
                if (res.status == 200) {
                    let entryList = res.data
                    this.entryList = []
                    this.entryList = this.entryList.concat(entryList)
                    if (this.entryList.length <= 0) {
                        this.$message.info('暂无数据哦')
                        this.searchLoading = false
                    } else {
                        this.searchLoading = false
                    }
                    // this.firstIndex = ''
                    // this.secondIndex = ''
                    for (let i = 0; i < this.entryList.length; i++) {
                        this.entryList[i].active = false
                    }
                }
            })
        },
        // 删除搜索条件
        handleDeleteSearch (_index) {
            this.searchParams.keywords.splice(_index, 1)
            if (this.searchParams.keywords.length == 0) {
                this.keywords = '*'
                this.searchParams.keywords.push(this.keywords)
            }
            this.entryList = []
            this.searchParams.curpage = 1
            this.handleInquireSearch()
            this.handleGroupCountFullText()
        },
        // 人物
        handleKeyfigures (_type) {
            let vm = this
            this.keyfigures = [] // 人物
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let keyfigures = res.data
                    let hash = {}
                    const newArr = keyfigures.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.keyfigures = newArr
                }
            })
        },
        // 账号
        handleAccountNumber (_type) {
            let vm = this
            this.socialaccount = [] // 账号
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let socialaccount = res.data
                    let hash = {}
                    const newArr = socialaccount.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.socialaccount = newArr
                }
            })
        },
        // 动态
        handleDynamicCondition (_type) {
            let vm = this
            this.dynamicCondition = [] // 动态
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let dynamicCondition = res.data
                    let hash = {}
                    const newArr = dynamicCondition.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.dynamicCondition = newArr
                }
            })
        },
        // 组织
        handleFocusgroup (_type) {
            let vm = this
            this.focusgroup = [] // 组织
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let focusgroup = res.data
                    let hash = {}
                    const newArr = focusgroup.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.focusgroup = newArr
                }
            })
        },
        // 文档
        handleDocument (_type) {
            let vm = this
            this.document = [] // 动态
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let document = res.data
                    let hash = {}
                    const newArr = document.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.document = newArr
                }
            })
        },
        // 多媒体
        handleMedia (_type) {
            let vm = this
            this.media = [] // 动态
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let media = res.data
                    let hash = {}
                    const newArr = media.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.media = newArr
                }
            })
        },
        // 选择bar
        selectBar (index) {
            if (this.activeBar == index) {
                // 回归初始状态
                this.activeBar = -1
                return
            }
            this.activeBar = index
        },
        // 打开右侧详细信息
        openInfo () {},
        // 拖动时间轴显示标注
        showOverlays (data) {
            var allOverlay = this.map.getOverlays()
            for (let item of allOverlay) {
                if (item.customData) {
                    if (data.includes(item.customData.rowkey)) {
                        item.setIcon(
                            new BMap.Icon(eventPointCheckImg, new BMap.Size(32, 36), {
                                imageOffset: new BMap.Size(0, 0),
                                imageSize: new BMap.Size(32, 36)
                            })
                        )
                    } else {
                        item.setIcon(
                            new BMap.Icon(eventPointImg, new BMap.Size(23, 25), {
                                imageOffset: new BMap.Size(0, 0),
                                imageSize: new BMap.Size(23, 25)
                            })
                        )
                    }
                }
            }
        },
        // 删除节点
        handleDeleteNode () {
            var allOverlay = this.map.getOverlays()
            for (let item of allOverlay) {
                if (item.customData) {
                    if (item.customData.rowkey == this.current_checked_marker) {
                        this.map.removeOverlay(item)
                        if (this.allMark && this.allMark.length > 0) {
                            for (let [index, self] of this.allMark.entries()) {
                                if (self.rowkey == this.current_checked_marker) {
                                    this.allMark.splice(index, 1)
                                }
                            }
                        }
                    }
                }
            }
        },
        // 根据对象Uri获得该该对象下所有可操作的属性
        getproperty (_uri) {
            this.showSelect = true
            this.addAttribute = {}
            findOperateProperties({ uri: _uri }).then(res => {
                let arrList = []
                this.findOperateList = res.data
                this.findOperateListModel = []
                this.findOperateListModelAll = []
                for (let i = 0; i < this.findOperateList.length; i++) {
                    let current = this.findOperateList[i]
                    if (current.representative == '1') {
                        if (current.propertyType == 'GisData') {
                            let obj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'GisData',
                                displayed: current.displayed != '0',
                                address: '',
                                latitude: '',
                                longitude: '',
                                displayname: current.displayname,
                                representative: current.representative,
                                label: current.representative == 1
                            }
                            this.findOperateListModel.push(obj)
                        } else if (current.propertyType == 'TimeInterval') {
                            let timeObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'TimeInterval',
                                displayed: current.displayed != '0',
                                timeStart: '',
                                timeEnd: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.findOperateListModel.push(timeObj)
                        } else if (current.propertyType == 'DateTime') {
                            let timeDataObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'DateTime',
                                displayed: current.displayed != '0',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.findOperateListModel.push(timeDataObj)
                        } else {
                            let stringObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'String',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                displayed: current.displayed != '0',
                                representative: current.representative
                            }
                            this.findOperateListModel.push(stringObj)
                        }
                    } else {
                        if (current.propertyType == 'GisData') {
                            let obj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'GisData',
                                displayed: current.displayed != '0',
                                address: '',
                                latitude: '',
                                longitude: '',
                                displayname: current.displayname,
                                representative: current.representative,
                                label: current.representative == 1
                            }
                            this.findOperateListModelAll.push(obj)
                        } else if (current.propertyType == 'TimeInterval') {
                            let timeObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'TimeInterval',
                                displayed: current.displayed != '0',
                                timeStart: '',
                                timeEnd: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.findOperateListModelAll.push(timeObj)
                        } else if (current.propertyType == 'DateTime') {
                            let timeDataObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'DateTime',
                                displayed: current.displayed != '0',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.findOperateListModelAll.push(timeDataObj)
                        } else {
                            let stringObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'String',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                displayed: current.displayed != '0',
                                representative: current.representative
                            }
                            this.findOperateListModelAll.push(stringObj)
                        }
                    }
                }
            })
        },
        // 查询选择属性类型
        handleChoosePropertyUri () {
            if (this.addAttribute === '1') {
                this.$message.error('该属性为代表属性，不允许操作!')
                this.handleCannel()
                this.addAttribute = ''
                return
            }
            for (let item of this.propertyList) {
                // todo
                for (let list of item.propertyValues) {
                    if (
                        item.propertyUri == this.addAttribute.propertyUri &&
            !list.readOnly
                    ) {
                        this.$message.error('您已标注过该属性,不可重复添加')
                        this.handleCannel()
                        return
                    }
                }
            }
            this.addAttributeSave = {}
            for (let i = 0; i < this.findOperateListModelAll.length; i++) {
                let current = this.findOperateListModelAll[i]
                if (current.propertyUri == this.addAttribute.propertyUri) {
                    this.addAttribute.propertyType = current.propertyType
                    this.addAttribute.name = current.displayname
                }
            }

            for (let j = 0; j < this.propertyList.length; j++) {
                let propertyListCurrent = this.propertyList[j]
                if (this.addAttribute.propertyUri == propertyListCurrent.propertyUri) {
                    this.propertyType = 'edit'
                }
            }
        },
        // 取消属性
        handleCannel () {
            let vm = this
            vm.showSelect = false
            vm.addAttributeSave = {}
            vm.addAttribute.propertyType = ''
            vm.addAttribute = {}
        },
        // 属性选择框添加属性
        addProperty () {
            this.propertyAddVisible = true
        },
        // 关闭新增属性对话框
        closeAddPropertyDialog () {
            this.propertyAddVisible = false
            this.getproperty(this.nodesParmas.objecturi)
            // this.ruleForm.current_attr_value = ''
        }
    }
}
</script>
<style scoped>
@import "../../assets/relation.css";
</style>
<style lang="less" scoped>
.property-value {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  .box_outer {
    width: 100%;
    border-bottom: 1px solid#efe9e9;
    padding: 5px 0;
    button {
      width: 20%;
      padding: 5px 3px;
    }
  }
  p {
    display: flex;
    align-items: center;
    padding: 5px 0;
    span {
      padding-right: 10px;
      width: 60%;
      &.TimeIntervalSpan {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
      }
    }
  }
}
.map-show {
  widows: 100%;
  height: 100%;
  position: relative;
  #menu {
    position: absolute;
    z-index: 100000;
    padding: 5px 0;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px;
    background: #ffffff;
    &.nodata {
      display: none;
    }
    li {
      color: #333 !important;
      padding: 3px 20px !important;
      margin: 0 !important;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
      min-width: 150px;
      cursor: pointer;
      &:hover {
        background: #08c;
        color: #ffffff !important;
      }
    }
  }
  .side-bar {
    position: absolute;
    display: flex;
    left: 0;
    top: 0;
    height: 100%;
    .bar {
      text-align: center;
      font-size: 14px;
      position: relative;
      z-index: 10;
      background: #444;
      li {
        cursor: pointer;
        color: #bfbdbd;
        padding: 8px;
        width: 50px;
        p {
          span {
            font-size: 19px;
          }
          margin-bottom: 5px;
        }
        &.active {
          color: #ffffff;
        }
      }
    }
    .contents {
      position: relative;
      z-index: 9;
    }
    .searchList {
      position: relative;
      left: 0;
      z-index: 9;
      .searchList_content {
        // position: absolute;
        // left:226px;
        width: 226px;
        height: 100%;
        background: #ffffff;
        border-right: 1px solid #e0e0e0;
        border-left: 1px solid #e0e0e0;
        overflow-y: auto;
        &.loading {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .timelineBar {
      // position: absolute;
      height: 100%;
      position: relative;
      z-index: 9;
      .contentLine {
        position: fixed;
        padding-left: 50px;
        bottom: 0;
        width: 100%;
        left: 0;
      }
    }
    .content {
      position: relative;
      top: 0;
      height: 0;
      width: 0;
      transition: width 0.6s;
      -webkit-transition: width 0.6s; /* Safari */
      padding-top: 0px;
      background: #ffffff;
      .padd {
        padding: 20px 20px;
      }
      &.activity {
        width: 226px;
        height: 100%;
      }
      .search-condition {
        padding: 0 8px;
      }
    }
  }
  .side-panel {
    position: absolute;
    left: 48px;
    top: 0;
    height: 100%;
    box-sizing: border-box;
    background-color: #f9f9f9;
  }
  .main {
    width: 100%;
    height: 100%;
    background: #ccc;
    position: absolute;
    top: 0;
    .tootip {
      position: absolute;
      width: 100%;
      top: 0;
      padding-left: 50px;
      z-index: 99999999;
    }
    .map {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
  .right_info {
    position: absolute;
    border-left: 1px solid #e0e0e0;
    width: 25%;
    right: 0;
    top: 0;
    background: #f9f9f9;
    height: 100%;
    &.detail-pane {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      left: auto !important;
      width: 25%;
      min-width: 200px !important;
      -webkit-transform: none !important;
      -moz-transform: none !important;
      -o-transform: none !important;
      transform: none !important;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      transition-property: transform;
      -webkit-transition-timing-function: ease-in-out;
      -moz-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
      -webkit-transition-duration: 0.2s;
      -moz-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      transition-duration: 0.2s;
      visibility: visible;
      right: 0;
      height: 100%;
    }
  }
}
.slide-fade-enter-active {
  transition: all 1.5s ease;
}
.slide-fade-leave-active {
  transition: all 0s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
</style>
<style lang="less">
.property-value {
  .GisData {
    width: 60%;
    .latLon {
      display: flex;
      align-content: center;
    }
    .el-input {
      padding: 3px 0;
      width: 100% !important;
    }
  }
  .el-input {
    width: 100% !important;
  }
}
</style>
